<template>
	<div>
		<form v-if="!isReg">
			<div>用户名:</div>
			<input type="text"  v-model="name">
			<div>密码:</div>
			<input type="text"  v-model="password" >
			<button @click="login()">登陆</button>
			<button @click="reg()">注册</button>
		</form>	
		<form v-else>
			<div>用户名:</div>
			<input type="text"  v-model="name">
			<div >密码</div>
			<input type="text" v-model="password">
			<div>再次输入密码</div>
			<input type="text"  v-model="repeat">
			<button @click="addUser()">确定</button>
			<button @click="cancel()">取消</button>
		</form>
		
	</div>
</template>
<script>
	export default{
		name:'Login',
		data(){
			return{
				isReg:false,
				name:'',
				password:'',
				repeat:''
			}
		},
		methods:{
			reg(){
				this.isReg=true
			},
			cancel(){
				this.isReg=false
				this.name=""
			},
			login(){
				if(localStorage.getItem('name') === this.name && localStorage.getItem('password') === this.password){
					this.name=''
					this.password=''
					this.$router.push('/home/list')

				}else{
					alert('账号密码不正确')
					this.name=''
					this.password=''
				}
			},
			addUser(){
				if(this.password === this.repeat){
					localStorage.setItem('name', this.name)
					localStorage.setItem('password',this.password)
					this.name=''
					this.password=''
					this.repeat=''
					this.isReg=false
				}else{
					alert('两次输入密码不一致')
					this.password=''
					this.repeat=''
				}
			}
		}
	}
</script>
<style scoped>
	
</style>